<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="./thisP/css/videoShare.css">

	<script src="./my_assist/js/jquery-3.1.1.js"></script>
	<script src="./my_assist/js/vue.js"></script>
	<script src="./my_assist/js/phone.js"></script>
	<script src="./thisP/js/videoShare.js"></script>
</head>
<body>
	<div id="videoShare">
	<!-- 图片 -->
		<div class="top">
			<img src="./thisP/image/product03.jpg" alt="">
			<div class="listener">
				<img src="./thisP/image/content_icon_listen_white@2x.png" alt="">
				<span>236</span>
			</div>
			<div class="title">如何运用占星来谈一段好感情</div>
		</div>
	<!-- progress -->
		<div class="progress_box">
			<div class="progress" style="width:2%;" >
				<span class="progress_bar"></span>
			</div>
		</div>
	<!-- timePlay -->
		<div class="time">
			<span>02:43</span>
			<span>08:20</span>
		</div>
	<!-- controlPlay -->
		<div class="controlPlay">
			<img class="prev" src="./thisP/image/content_btn_prev@2x.png">

			<img class="playStatus playSAct" src="./thisP/image/content_btn_pause@2x.png">
			<img class="playStatus " src="./thisP/image/content_btn_play@2x.png">

			<img class="next" src="./thisP/image/content_btn_next@2x.png">
		</div>

	<!-- musicList -->
		<div class="musicList">
			<div class="musicItem" v-for="(item,index) in musList"  :key="index"
			@click="listClick(index)">
				<div class="ml">
					<div :class="item.divclassName">
						{{item.title_name}}
					</div>
					<div class="botM">
						<img src="./thisP/image/classcontent_icon_time@2x.png" alt="">
						<span>{{item.numPeople}}</span>
						<img src="./thisP/image/classcontent_icon_listen@2x.png" alt="">
						<span>{{item.timeLong | timeFormatModification}}</span>
					</div>
				</div>
				<img class="mr" v-if="num == index" src="./thisP/image/content_btn_motion_small@2x.png" >
				<img class="mr" v-if="num !== index"  src="./thisP/image/content_btn_play_small@2x.png" >
			</div>
		</div>
		<!-- vue -->
		<script>
			//时间格式修改
			Vue.filter('timeFormatModification', function (time) {
				let duration = parseInt(time);
				let minutes = 0;
				let seconds = 0;
				minutes = parseInt(duration/60) >=10 ?  parseInt(duration/60) : '0' + parseInt(duration/60);
				seconds = parseInt(duration%60) >=10 ?  parseInt(duration%60) : '0' + parseInt(duration%60);
				return minutes + ':' + seconds ;
			})


			var app = new Vue({
				el:'.musicList',
				data:{
				    musList:[
								{
									voiceid:0,
									url: 'http:\/\/cdnergebd.shoujiduoduo.com\/user_audio\/56\/user_2157830_1523707996056.mp3',
									logo:'../../images/imagesStoryList/playList/play0.png',
									backimg:'http://haha.boboweiqi.cn/lrtsimg/1.jpg',
									title_name:'小猪佩奇',
									list_name:'芒果妈妈睡觉故事01',
									status:false,
									numPeople:230,
									timeLong:843
								},
								{
									voiceid:1,
									url: 'http:\/\/cdnergebd.shoujiduoduo.com\/user_audio\/73\/user_1359240_1520431127073_vn.mp3',
									logo: '../../images/imagesStoryList/playList/play1.png',
									backimg: 'http://haha.boboweiqi.cn/lrtsimg/1.jpg',
									title_name:'茜茜妈妈',
									list_name:'芒果妈妈睡觉故事01',
									status:false,
									numPeople:260,
									timeLong:810
								},
								{
									voiceid:2,
									url: 'http:\/\/cdnergebd.shoujiduoduo.com\/user_audio\/63\/user_2157830_1522632526063.mp3',
									logo: '../../images/imagesStoryList/playList/play2.png',
									backimg: 'http://haha.boboweiqi.cn/lrtsimg/1.jpg',
									title_name:'橘子老虎',
									list_name:'芒果妈妈睡觉故事01',
									status:false,
									numPeople:210,
									timeLong:790
								},
								{
									voiceid:0,
									url: 'http:\/\/cdnergebd.shoujiduoduo.com\/user_audio\/56\/user_2157830_1523707996056.mp3',
									logo:'../../images/imagesStoryList/playList/play0.png',
									backimg:'http://haha.boboweiqi.cn/lrtsimg/1.jpg',
									title_name:'小猪佩奇',
									list_name:'芒果妈妈睡觉故事01',
									status:false,
									numPeople:230,
									timeLong:843
								},
								{
									voiceid:1,
									url: 'http:\/\/cdnergebd.shoujiduoduo.com\/user_audio\/73\/user_1359240_1520431127073_vn.mp3',
									logo: '../../images/imagesStoryList/playList/play1.png',
									backimg: 'http://haha.boboweiqi.cn/lrtsimg/1.jpg',
									title_name:'茜茜妈妈',
									list_name:'芒果妈妈睡觉故事01',
									status:false,
									numPeople:260,
									timeLong:810
								},
								{
									voiceid:2,
									url: 'http:\/\/cdnergebd.shoujiduoduo.com\/user_audio\/63\/user_2157830_1522632526063.mp3',
									logo: '../../images/imagesStoryList/playList/play2.png',
									backimg: 'http://haha.boboweiqi.cn/lrtsimg/1.jpg',
									title_name:'橘子老虎',
									list_name:'芒果妈妈睡觉故事01',
									status:false,
									numPeople:210,
									timeLong:790
								},
							],
					num:0
				},
				created:function(){
					this.musList[this.num].status = true
					musicListMap(this.musList,this.num)
				},
				computed:{},
				methods:{
					listClick:function(index){
						this.num = index
						musicListMap(this.musList,this.num)
					}
				}
			})
			
			//修改音乐列表
			function musicListMap(musList,index){
				for (var i = 0; i < musList.length; i++) {
					musList[i].divclassName = 'topM'
					if(i == index){
						musList[i].divclassName = 'topM topMAct'
						continue;
					}
				}
			}
			
		</script>
	</div>
</body>
</html>


列表页面
播放
首页
我的